<template>
	<view class="jsht">
		<!-- <view id="jsht_chart" class="jsht_charts" ref="chart"></view> -->
		<l-echart class="jsht_charts" ref="chart" @finished="init"></l-echart>
		<view class="customTooltips" :style="{ left: position[0] + 'px', top: position[1] + 'px' }" v-if="params.length && position.length && showTip">
			<view>这是个自定的tooltips</view>
			<view>{{ params[0]['axisValue'] }}</view>
			<view v-for="(item, index) in params" :key="index">
				<view>
					<text>{{ item.seriesName }}</text>
					<text>{{ item.value }}</text>
				</view>
			</view>
		</view>
		<view class="statistics">
			<view class="statistics_item" v-for="(item, index) in statisticsData" :key="index">
				<view class="icon" :class="item.type === '技术交易额' ? 'cc' : ''"></view>
				<view class="content">
					<view class="content_title">{{ item.type }}</view>
					<view class="money">
						<!-- <span class="number">{{ item.num }}</span>
		        万元 -->
						<span class="number" :class="item.type === '技术交易额' ? 'cc' : ''">{{ conversion(item.num).num }}</span>
						{{ conversion(item.num).unit }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getHtList1, getHtMoney } from '@/api/zhyp/statistics';
import * as echarts from 'echarts';
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
	components: { LEchart },
	data() {
		return {
			searchValue:2022,
			myChart: null,
			orgType: [],
			orgNum: [],
			data: [],
			optionData: [],
			colors: ['rgba(73,195,132,0.9)', 'rgba(156,190,207,0.9)', 'rgba(43,142,243,0.9)', 'rgba(221,210,70,0.9)', 'rgba(84,167,217,0.9)'],
			statisticsData: [],
			option: {
					tooltip: {
						trigger: 'item',
						renderMode: 'richText',
						position: (point, params, dom, rect, size) => {
							// 假设自定义的tooltips尺寸
							const box = [170, 170];
							// 偏移
							const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20;
							const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20;
							const x = point[0] + offsetX;
							const y = point[1] + offsetY;

							this.position = [x, y];
							this.params = params;
						}
					},
					legend: {
						left: '0',
						top: '10%',
						fontSize: '12rpx',
						icon: 'circle',
						orient: 'vertical',
						textStyle: {
							fontSize: '12rpx',
							color: 'rgba(255, 255, 255, 0.64)'
						}
					},
					color: ['#1563ff', '#34ffbf', '#d0deee', '#66e1df'],
					series: [
						{
							name: '技术合同',
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['67%', '50%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: []
						}
					]
				},
			showTip: false,
			position: [],
			params: [],
			code:'6103'
		};
	},
	async created() {
		await this.getData();
	},
	methods: {
		conversion(num) {
			function unitConvert(num) {
				var moneyUnits = ['元', '万元', '亿元', '万亿'];
				var dividend = 10000;
				var curentNum = num;
				//转换数字
				var curentUnit = moneyUnits[0];
				//转换单位
				for (var i = 0; i < 4; i++) {
					curentUnit = moneyUnits[i];
					if (strNumSize(curentNum) < 5) {
						break;
					}
					curentNum = curentNum / dividend;
				}
				var m = { num: 0, unit: '' };
				m.num = curentNum.toFixed(2);
				m.unit = curentUnit;
				return m;
			}

			function strNumSize(tempNum) {
				var stringNum = tempNum.toString();
				var index = stringNum.indexOf('.');
				var newNum = stringNum;
				if (index != -1) {
					newNum = stringNum.substring(0, index);
				}
				return newNum.length;
			}
			return unitConvert(num);
		},
		async getHtMoney() {
			const res = await getHtMoney({ addArea: this.code,year:this.searchValue });
			this.statisticsData = res.rows;
		},
		async getData() {
			this.optionData = []
			const res = await getHtList1({ addArea: this.code,year:this.searchValue });
			res.rows.forEach((i, index) => {
				this.optionData.push({
					name: i.type,
					value: i.num,
					itemStyle: {
						color: this.colors[index]
					}
				});
			});
			this.getHtMoney();
			this.option.series[0].data = this.optionData
			this.$refs.chart.setOption(this.option)
		},
		againRender(){
			this.$refs.chart.setOption(this.option)
		},
		init() {
			this.$refs.chart.init(echarts, (chart) => {
				setTimeout(() => {
					chart.setOption(this.option);
				}, 500);
				// 监听tooltip显示事件
				chart.on('showTip', (params) => {
					this.showTip = true;
				});
				chart.on('hideTip', (params) => {
					setTimeout(() => {
						this.showTip = false;
					}, 300);
				});
			});
		}
	}
};
</script>

<style lang="scss">
.jsht {
	font-size: 0.875rem;
	line-height: 1.375rem;
	color: rgba(255, 255, 255, 0.64);
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	align-items: center;
	.jsht_charts {
		height: 300rpx;
		width: 400rpx;
	}
	.statistics {
		height: 248rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.statistics_item {
			margin: 0.4375rem 0;
			flex: 1;
			max-height: 50%;
			display: flex;
			align-items: center;
			.icon {
				margin-right: 16rpx;
				height: 96rpx;
				aspect-ratio: 1;
				background-image: url(/static/largeDataScreenImg/ic_input.png);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				&.cc {
					background-image: url(/static/largeDataScreenImg/ic_output.png);
				}
			}
			.content {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.content_title {
					font-size: 28rpx;
				}
				.money {
					color: #fff;
					.number {
						font-size: 40rpx;
						color: rgba(255, 255, 255, 0.87);
						font-weight: 700;
						text-shadow: 0 4rpx 44rpx rgba(27, 126, 242, 0.83);
						line-height: 56rpx;
						&.cc {
							text-shadow: 0 4rpx 44rpx rgba(242, 105, 27, 0.68);
						}
					}
				}
			}
		}
	}
}
</style>
